<template>
  <div class="app-container">
<!--    头部-->
    <div class="arrow" @click="arrow">
      <img src="../../src/assets/arrow1.png" alt="">
    </div>
    <div class="header">
      <p>工单详情</p>
    </div>
<!--    内容-->
    <div class="content">
      <van-form @submit="onSubmit" :colon="true">
        <ul>
          <li><span>工单编号：</span>{{ dclDetail.wNumber }}</li>
          <li><span>工单来源：</span>{{ dclDetail.wSource }}</li>
          <li><span>创建时间：</span>{{ dclDetail.wTime }}</li>
          <li><span>所属项目：</span>{{ dclDetail.wObject }}</li>
          <li><span>发生位置：</span>{{ dclDetail.wPosition }}</li>
          <li><span>设备大类：</span>{{ dclDetail.wEquipmentType }}</li>
          <!-- <li><span>故障类型：</span>设备故障</li> -->
          <li class="process">
            <div><span>处理文件：</span></div>
            <div @click="files">
              <img src="../../src/assets/see.png" class="process_img">
              <div class="process_text">点击查看处理文件</div>
            </div>
          </li>
          <li class="process">
            <div><span>现场照片：</span></div>
            <div @click="photos">
              <img src="../../src/assets/see.png" class="process_img">
              <div class="process_text">点击查看现场照片</div>
            </div>
          </li>
          <hr/>
          <li style="margin-top: 1.5rem;"><span>处理步骤：</span></li>
          <li><span>中央空调电机维修：</span></li>
        </ul>
<!--        电机维修处理人1-->
        <ul v-for=" (item,index) in workeOrderInfoList" :key="item.id">
          <li><span>处理人{{index+1}}：</span>{{ item.fUser }}</li>
          <li><span>处理结果：</span>{{item.fDescribe}}</li>
          <li class="upload" v-if="item.fFile">
            <div class="upload_file"><span>上传文件：</span></div>
            <div class="upload_files">
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
              <div class="upload_border">
                <div class="upload_borders">
                  <div class="upload_img"><img src="../../src/assets/file.png"></div>
                  <p class="upload_text">李波.pdf</p>
                </div>
              </div>
            </div>
          </li>
          <li class="pic" v-if="item.fImg">
            <div class="pics"><span>上传照片：</span></div>
            <div class="pic_list">
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
              <div class="pic_border">
                <img src="../../src/assets/lh.png">
              </div>
            </div>
          </li>
        </ul>
<!--        电机维修处理人2-->
       
<!--        电路维修处理人1-->
       
<!--        电路维修处理人2-->
        <ul style="margin-top: 1.5rem">
          <li><span>处理人{{workeOrderInfoList.length+1}}：</span> <input type="text" v-model="workeOrderInfo.fUser"> </li>
          <li><span>处理结果：</span><input type="text" v-model="workeOrderInfo.fDescribe"></li>
          <li class="file">
            <div><span>上传文件：</span></div>
            <div class="file_border">
              <van-uploader
                v-model="fileLists"
                :max-count="9"
                preview-size="2.5rem"
                multiple
                :after-read="afterReads"
                accept=".doc,.docx,.pdf,.ppt,.pptx,.xlsx,.xls"
              >
                <div class="file_circle">
                  <div class="file_plus">+</div>
                </div>
              </van-uploader>
              <div class="file_tips" v-if="fileLists.length==0">请上传相关文件</div>
            </div>
          </li>
          <li class="file">
            <div><span>上传照片：</span></div>
            <div class="file_border">
              <van-uploader
                v-model="fileList"
                :max-count="9"
                preview-size="2.5rem"
                multiple
                :after-read="afterRead"
                accept=".jpg,.jpeg,.png" preview-full-image
              >
                <div class="file_circle">
                  <div class="file_plus">+</div>
                </div>
              </van-uploader>
              <div class="file_tips" v-if="fileList.length==0">请上传相关照片及视频</div>
            </div>
          </li>
        </ul>
        <div class="button">
          <van-button class="btn" square block native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import {getWorkOrderHomeOrInfo , addWorkOrderHome , deleteWorkOrderHomeOrInfo , clWorkOrderInfo} from '@/api/index'
// import { } from '@/api/index'
export default {
  name: 'pending',
  data () {
    return {
      // InfoList列表数据
      workeOrderInfoList:[],
      // workerorderINfo数据
      workeOrderInfo:{
        fUser:'aixleft',
        fDescribe:'测试',
        search:'',
        fHomeid:'',
        fTeskItems:''
      },
      dclDetail:{},
      fileLists: [],
      fileList: [
        // {
        //   url: 'https://img01.yzcdn.cn/vant/leaf.jpg',
        //   status: 'uploading',
        //   // message: '上传中...',
        // },
        // {
        //   url: 'https://img01.yzcdn.cn/vant/tree.jpg',
        //   status: 'failed',
        //   // message: '上传失败',
        // }
      ]
    }
  },
  props: {},
  watch: {},
  computed: {},
  created () {
  },
  mounted () {
    this.getPendingDetailInfo()
  },
  methods: {
    // 打开待处理页面
    async getPendingDetailInfo(){
      // const res = await getWorkOrderHomeOrInfo(this.$route.params.id)
      const res = await getWorkOrderHomeOrInfo(this.$route.params.id)
      this.dclDetail = res.data.JCSJ
      this.workeOrderInfoList = res.data.YXSJ.slice(0,-1)
      this.workeOrderInfo = res.data.YXSJ.slice(-1)[0]
      this.workeOrderInfo.fHomeid = this.dclDetail.id
      this.workeOrderInfo.fTeskItems =res.data.LCSJ.slice(-1)[0].id
      console.log(res)
      console.log(this.dclDetail)
      console.log(this.workeOrderInfoList)
      console.log(this.workeOrderInfo)
    },
    // 返回首页
    arrow () {
      router.push('/')
    },
    // 表单提交
    onSubmit () {
      // console.log('submit', this.workeOrderInfo)
      clWorkOrderInfo(this.workeOrderInfo)
      router.push('/')
    },
    // 点击查看处理文件
    files () {
      router.push('/file')
    },
    // 点击查看现场照片
    photos () {
      router.push('/photo')
    },
    // 上传文件
    afterReads (file) {
      // upload是一个附件上传格式处理后的公共方法，代码在下边。
      // url为上传附件的后台接口路径
      // upload (`url`, {
      //   file
      // }).then((data) => {
      //   // 上传成功后返回附件相关信息
      // })
    },

   //  //附件上传配置为FormData格式
   // //url为接口请求路径
   // //params为附件返回的file中携带的数据
   //  export function upload(url, params) {
   //    return new Promise((resolve, reject) => {
   //      const param = new FormData();
   //      param.append("file", params.file.file);
   //      const config = {
   //        headers: { "Content-Type": "multipart/form-data" },
   //      };
   //      axios.post(url, param, config)
   //        .then((res) => {
   //          console.log(res);
   //          resolve(res.data);
   //        })
   //        .catch((err) => {
   //          reject(err.data);
   //        });
   //    });
   //  },

    // 上传照片
    afterRead (file) {
      // file.status = 'uploading'
      // file.message = '上传中...'
      //
      // setTimeout(() => {
      //   file.status = 'failed'
      //   file.message = '上传失败'
      // }, 1000)

      // upload是一个附件上传格式处理后的公共方法，代码在下边。
      // url为上传附件的后台接口路径
      // upload(`url`, {
      //   file
      // }).then((data) => {
      //   //上传成功后返回附件相关信息
      // })
    }
  },
  components: {}
}
</script>

<style lang='scss' scoped>
@import "./pending.scss";
</style>
